<script setup>
import {stringIsNull} from "@/utils/string_utils.js"

/**
 * 获取环境变量
 * @type {ImportMetaEnv}
 */
const env = import.meta.env
const LOGO_IMAGE_URL = env?.VITE_LOGO_IMAGE_URL // logo 图片 url
const LOGO_TEXT = env?.VITE_LOGO_TEXT // logo text

/**
 * 接收组件传递参数
 */
const props = defineProps({
  // logo 组件点击事件处理函数
  logoClickHandler: {type: Function, default: () => {}},
  // 是否开启展示 logo 图片
  enableLogoImage: {type: Boolean, default: true},
  // logo 图片大小
  logoImageSize: {type: String, default: '3rem'},
  // logo 图片 url
  logoImageUrl: {type: String, default: ''},
  // 是否开启展示 logo 文本
  enableLogoText: {type: Boolean, default: true},
  // logo 文本文字大小
  logoTextSize: {type: String, default: '2.5rem'},
  // logo 文本
  logoText: {type: String, default: ''},
})
</script>

<template>
  <!-- 小尾巴 Logo 组件 -->
  <div class="tail-logo-box" @click="logoClickHandler">
    <!-- logoImageUrl 不为空则使用 logoImageUrl，否则使用 LOGO_IMAGE_URL(环境变量) -->
    <img
        v-if="enableLogoImage"
        :src="stringIsNull(logoImageUrl) ? LOGO_IMAGE_URL : logoImageUrl"
        alt="logo"
        :style="{height: logoImageSize}"
    />
    <!-- logoText 不为空则显示，否则显示 LOGO_TEXT(环境变量) -->
    <span v-if="enableLogoText" :style="{fontSize: logoTextSize}">
      {{ stringIsNull(logoText) ? LOGO_TEXT : logoText }}
    </span>
  </div>
</template>

<style scoped lang="scss">
/*
 * 小尾巴 logo 组件
 */
.tail-logo-box {
  background-color: var(--tail-logo-bgc);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  // 用户不能选中
  user-select: none;

  /*
   * logo 图片
   */
  img {
    margin-right: 0.5rem;
  }

  /*
   * logo 文本
   */
  span {
    font-family: var(--tail-logo-text-font-family); // 锐字太空混元像素简繁-闪 超黑 字体
    font-weight: bold;
    //font-size: 3rem;
    white-space: nowrap;
    color: var(--tail-logo-text-font-color);
  }
}
</style>